<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="moil">
<head>
    <%@include file="/WEB-INF/jsp/commons/meta.jsp" %>
    <title>${title}</title>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <!-- 响应式设计 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body ng-controller="AllDocCtrl">

<!-- content -->
<div class="u_child_box">
    <div class="u_title_bar">
        <span id="device_info" class="u_title">资源组编辑</span>
    </div>
</div>
<form id="inputForm" class="well form-inline" action="${ctx}/security/resourcesGroup/save" method="post">
	<input type="hidden" name="id" value="${resourcesGroup.id}" />
	<table class="table table-striped table-bordered table-condensed">
		<thead>
			<strong><i class="icon-flag"></i> 资源组表单</strong>
		</thead>
		<tr>
			<td class="span2">分组名称:</td>
			<td>
				<input id="name" name="name" type="text" value="${resourcesGroup.name}" size="30" maxlength="80" />
			</td>
		</tr>
		<tr>
			<td>排序:</td>
			<td>
				<input id="gorder" name="gorder" type="text" value="${resourcesGroup.gorder}" size="30" maxlength="80" />
			</td>
		</tr>
		<tr>
			<td>菜单:</td>
			<td>
				<label class="radio">
					<input name="menu" type="radio" value="1" <c:if test="${resourcesGroup.menu}">checked="checked"	</c:if> />
					是
				</label>
				<label class="radio">
					<input name="menu" type="radio" value="0" <c:if test="${!resourcesGroup.menu}">checked="checked"	</c:if> />
					否
				</label>
			</td>
		</tr>
        <tr>
            <td>图标:</td>
            <td>
                <input id="icon" readonly="readonly" name="icon" type="hidden"
                       value="${resourcesGroup.icon == null ? 'icon-list-alt':resourcesGroup.icon}" size="30" maxlength="80"/>
                <i id="iconbar" class="${resourcesGroup.icon == null ? 'icon-list-alt':resourcesGroup.icon}"></i>
                <a id="seeIcons" style="cursor: pointer;">修改图标</a>

                <div>
                    <%@ include file="/WEB-INF/html/frame/group-icons.html" %>
                </div>
            </td>
        </tr>
		<tr>
			<td>备注:</td>
			<td>
				<textarea id="memo" name="memo" rows="4" class="span6">${resourcesGroup.memo}</textarea>
			</td>
		</tr>
		<tr>
			<td></td>
            <td>
				<input class="btn" type="submit" value="提交" />
				&nbsp;
				<input class="btn" type="button" value="返回" onclick="history.back()" />
			</td>
		</tr>
	</table>
</form>

<script type="text/javascript">
    (function () {
        angular.module("moil", []);
        window.AllDocCtrl = function ($scope, $rootScope) {

        }
    })();
    $(document).ready(function() {
        //聚焦第一个输入框
        $("#name").focus();
        //为inputForm注册validate函数
        $("#inputForm").validate({
            rules : {
                gorder : "required",
                memo : "required",
                name : "required"
            }
        });

        $("#seeIcons").toggle(function () {
            $(".icons").show("slow");
            $(this).text("隐藏图标");
        }, function () {
            $(this).text("修改图标");
            $(".icons").hide("slow");
        });
        $(".icons span").click(function () {
            $("#icon").val($(this).find("i").attr("class"));
            $("#iconbar").attr("class", $("#icon").val());
        }).css("cursor", "pointer");
    });
</script>
</body>
</html>